<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API文档管理系统 - 首页</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 主内容 -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-house-door"></i>
                            欢迎使用API文档管理系统
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>系统功能</h6>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-check-circle text-success"></i> API文档的增删改查</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 在线API测试</li>
                                    <li><i class="bi bi-check-circle text-success"></i> Swagger UI集成</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 友好的用户界面</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 响应式设计</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>快速开始</h6>
                                <div class="d-grid gap-2">
                                    <a th:href="@{/api-doc/list}" class="btn btn-primary">
                                        <i class="bi bi-list"></i>
                                        查看API列表
                                    </a>
                                    <a th:href="@{/api-doc/create}" class="btn btn-success">
                                        <i class="bi bi-plus-circle"></i>
                                        新增API文档
                                    </a>
                                    <a th:href="@{/swagger-ui/index.html}" target="_blank" class="btn btn-info">
                                        <i class="bi bi-code-square"></i>
                                        访问Swagger UI
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 p-3 bg-info bg-opacity-10 rounded">
                            <h6 class="text-info">
                                <i class="bi bi-lightbulb"></i>
                                使用说明
                            </h6>
                            <ul class="mb-0">
                                <li><strong>API管理：</strong>通过"API列表"页面可以查看、编辑、删除API文档</li>
                                <li><strong>新增API：</strong>点击"新增API"按钮可以添加新的API文档</li>
                                <li><strong>API测试：</strong>在API详情页面可以测试API接口</li>
                                <li><strong>Swagger集成：</strong>点击"Swagger UI"可以访问自动生成的API文档</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="row mt-4" th:if="${apis != null}">
                    <div class="col-md-4">
                        <div class="card text-center">
                            <div class="card-body">
                                <i class="bi bi-book fs-1 text-primary"></i>
                                <h5 class="card-title mt-2" th:text="${apis.size()}">0</h5>
                                <p class="card-text">API总数</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card text-center">
                            <div class="card-body">
                                <i class="bi bi-check-circle fs-1 text-success"></i>
                                <h5 class="card-title mt-2">100%</h5>
                                <p class="card-text">文档完整率</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card text-center">
                            <div class="card-body">
                                <i class="bi bi-lightning fs-1 text-warning"></i>
                                <h5 class="card-title mt-2">实时</h5>
                                <p class="card-text">在线测试</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
</body>
</html>